import React from "react";
import { RightOutline } from "antd-mobile-icons";
import "./index.css";
import { SpinLoading, Skeleton } from "antd-mobile";
export default function ProductSection({
    type,
    title,
    products,
    onProductClick,
    loading,
}) {
    return (
        <div className={`product-section ${type}-section`}>
            <div className="section-header">
                <h3>{title}</h3>
                <RightOutline />
            </div>
            <div className="product-list">
                {loading ? (
                    <>
                        <Skeleton
                            animated
                            className="product-item"
                            style={{ height: "200px" }}
                        />
                        <Skeleton
                            animated
                            className="product-item"
                            style={{ height: "200px" }}
                        />
                    </>
                ) : (
                    products.map((product) => (
                        <div
                            key={product.id}
                            className="product-item"
                            onClick={() => onProductClick(product)}
                        >
                            <img src={product.image} alt="" />
                            <div className="product-item-info">
                                <h4>{product.name}</h4>
                                <div className="product-item-price">
                                    <span className="price">
                                        ￥{product.price}
                                    </span>
                                    <span className="original-price">
                                        ￥{product.originalPrice}
                                    </span>
                                </div>
                            </div>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
}
